$def with (page)

<html>
<head>
    <title>Debrew</title>
    <script type="text/javascript" src="/static/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="/static/jquery-ui-1.11.0.custom/jquery-ui.css">
    <script src="/static/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
    <style>
        body{
            margin: 0px;
            background: #F8F4E4;
        }
        #header{
            background: #4E3F30;
            background: url('/static/images/4378090.png') repeat 50% 0% #4E3F30;
            height: 220px;
        }
        #logo-bg{
            background: #4E3F30;
            height: 220px;
        }
        #menu {
            background: #64BBC1;
            height: 40px;
        }
        .center{
            width: 800px;
            margin-left: auto ;
            margin-right: auto ;
        }
        ul{
            margin: 0px;
            padding: 0px;
        }
        ul > li{
            margin: 10px;
            float: left;
            list-style-type: none;
        }
        li>a{
            color: #FFF;
        }
        pre{
            background: #FEFEEB;
        }

        .sortable>li{ cursor: pointer; min-height: 30px; border: 1px solid #000;}
        li>span {display: block; width: 114px; float: left; padding: 5px;} 
        .block-Wait{ background: url('/static/icons/time-5-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Temp{ background: url('/static/icons/temperature-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Water{background: url('/static/icons/water-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Circle{background: url('/static/icons/circle-dashed-8-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Coarseness{background: url('/static/icons/coarseness.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Shake{background: url('/static/icons/arrow-32-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Move{background: url('/static/icons/arrow-11-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Grinder{background: url('/static/icons/settings-5-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Reset{background: url('/static/icons/undo-2-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        .block-Stop{background: url('/static/icons/stop-m.png') no-repeat scroll 0% 2px / 25px auto transparent; }
        li>span{ padding-left: 30px; }
    </style>

    <script>
    function doPoll(){
        $$.get( "/line" ).done(function( data ) {
            console.log(data)  
            $$("#temp").text(data.temp)
            if(data.running){
                $$("#status").text("Status: Running, line number: "+data.line_nr)
            }
            else{
                $$("#status").text("Status: Stopped")
            }
            setTimeout(doPoll,1000);        
        });
    }

    $$(document).ready(function() {
        doPoll();
    });
    </script>

</head>
<body>
    <div id="header">
        <div class="center" id="logo-bg">
            <img src="/static/images/logo.png" style="margin: 100px 0px 0px 10px;">
        </div>
    </div>
    <div id="menu">
        <div class="center">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/new">New Profile</a></li>
            </ul>
            <span id="temp" style="float: right; margin: 10px; color: #FFF;"></span>
        </div>
    </div>
    <div class="center">
        $:page
    </div>
</div>
</body>
</html>

